<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mia 纸娃娃换装</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./index.js" defer></script>
</head>
<body>
    <div class="container">
        <!-- 左侧按钮面板 -->
        <div id="buttonsPanel">
            <!-- 身体按钮组 -->
            <div class="button-group">
                <h3>身体</h3>
                <div id="bodyButtons" class="button-grid"></div>
            </div>
            
            <!-- 眼睛按钮组 -->
            <div class="button-group">
                <h3>眼睛</h3>
                <div id="eyesButtons" class="button-grid"></div>
            </div>
            
            <!-- 上衣按钮组 -->
            <div class="button-group">
                <h3>上衣</h3>
                <p class="help-text">我搞不定这个层级关系，<br>
                    总之请按照由内到外的顺序点击衣服，<br>
                    不然会出现打底衣显示在最外面的惨案。<br>
                如果发生了这样的惨案请刷新页面重置衣服</p>
                <div id="shirtButtons" class="button-grid"></div>
            </div>
            
            <!-- 下衣按钮组 -->
            <div class="button-group">
                <h3>下衣</h3>
                <div id="leggingsButtons" class="button-grid"></div>
            </div>
            
            <!-- 袜子按钮组 -->
            <div class="button-group">
                <h3>袜子</h3>
                <div id="socksButtons" class="button-grid"></div>
            </div>
            
            <!-- 鞋子按钮组 -->
            <div class="button-group">
                <h3>鞋子</h3>
                <div id="shoesButtons" class="button-grid"></div>
            </div>
            
            <!-- 耳环按钮组 -->
            <div class="button-group">
                <h3>耳环</h3>
                <div id="earringsButtons" class="button-grid"></div>
            </div>
            
            <!-- 头饰按钮组 -->
            <div class="button-group">
                <h3>头饰</h3>
                <div id="headwearButtons" class="button-grid"></div>
            </div>
            
            <!-- 其他按钮组 -->
            <div class="button-group">
                <h3>其他</h3>
                <div id="othersButtons" class="button-grid"></div>
            </div>
        </div>
        
        <!-- 中间纸娃娃显示区域 -->
        <div id="paperDoll">
            <!-- 身体容器 -->
            <div id="bodyContainer" class="clothing-container">
                <img class="clothing-item" data-type="body" data-index="1" src="images/Part_Body/Part_Body1.png">
            </div>
            
            <!-- 眼睛容器 -->
            <div id="eyesContainer" class="clothing-container"></div>
            
            <!-- 上衣容器 -->
            <div id="shirtContainer" class="clothing-container">
                <img class="clothing-item" data-type="shirt" data-index="18" src="images/Part_Shirt/Part_Shirt18.png">
            </div>
            
            <!-- 下衣容器 -->
            <div id="leggingsContainer" class="clothing-container"></div>
            
            <!-- 袜子容器 -->
            <div id="socksContainer" class="clothing-container"></div>
            
            <!-- 鞋子容器 -->
            <div id="shoesContainer" class="clothing-container"></div>
            
            <!-- 耳环容器 -->
            <div id="earringsContainer" class="clothing-container"></div>
            
            <!-- 头饰容器 -->
            <div id="headwearContainer" class="clothing-container"></div>
            
            <!-- 其他容器 -->
            <div id="othersContainer" class="clothing-container"></div>
        </div>
    </div>
</body>
</html>